import React, { useContext } from 'react';
import content from './../../../../content';
import Module from './componetns/module';
import './index.less';
const RenderSetting = (props) => {
  const dataContent = useContext(content);
  const { data, setData } = dataContent;
  const handleObj = {
    handleUpdate: ({ key, value, index }) => {
      setData(
        data.map((item, o) => {
          if (index === o) {
            return {
              ...item,
              [key]: value,
            };
          }
          return {
            ...item,
          };
        }),
      );
    },
    handleSelect: (index) => {
      setData(
        data.map((item, o) => {
          return {
            ...item,
            show: o === index,
          };
        }),
      );
    },
    handleRemove: (index) => {
      setData(
        data.filter((item, o) => {
          if (o !== index) {
            return true;
          }
        }),
      );
    },
    handleUp: (index) => {
      const newList = JSON.parse(JSON.stringify(data));
      console.log(newList);
      setData(
        data.map((item, value) => {
          if (index === value) {
            return newList[value - 1];
          } else if (index - 1 === value) {
            return newList[value + 1];
          } else {
            return item;
          }
        }),
      );
    },
    handleDown: (index) => {
      const newList = JSON.parse(JSON.stringify(data));
      setData(
        data.map((item, value) => {
          if (index === value) {
            return newList[value + 1];
          } else if (index + 1 === value) {
            return newList[value - 1];
          } else {
            return item;
          }
        }),
      );
    },
    handleOption: ({ index, optionIndex, type, value }) => {
      if (type === 'add') {
        setData(
          data.map((item, o) => {
            if (o === index) {
              const { option } = item;
              return {
                ...item,
                option: [...option, `选项${option.length + 1}`],
              };
            } else {
              return item;
            }
          }),
        );
      } else if (type === 'remove') {
        setData(
          data.map((item, o) => {
            if (o === index) {
              const { option } = item;
              return {
                ...item,
                option: option.filter((item, i) => {
                  return i !== optionIndex ? true : false;
                }),
              };
            } else {
              return item;
            }
          }),
        );
      } else if (type === 'edit') {
        setData(
          data.map((item, o) => {
            if (o === index) {
              const { option } = item;
              return {
                ...item,
                option: option.map((item, o) => {
                  if (o !== optionIndex) {
                    return item;
                  } else {
                    return value;
                  }
                }),
              };
            } else {
              return item;
            }
          }),
        );
      }
    },
    handleRadius: (index, val) => {
      console.log(val, index);
      setData(
        data.map((item, o) => {
          const { setting } = item;
          return {
            ...item,
            setting: index === o ? val : setting,
          };
        }),
      );
    },
    handleImage: (obj, index) => {
      handleObj.handleUpdate({
        key: 'imgObj',
        value: obj,
        index,
      });
    },
  };
  return (
    <div className="renderSetting_box">
      <div className="renderSetting_collect"></div>
      <p style={{ marginBottom: 8, color: '#999999' }}>拖拽调整当前页面组件顺序</p>
      <div className="renderSetting_info_box">
        <div className="renderSetting_info_auto">
          {data.map((item, index) => {
            const { type } = item;
            const SettingItem = Module[type];
            return (
              <SettingItem
                {...item}
                index={index}
                setData={setData}
                listLength={data.length}
                handleObj={handleObj}
                key={index}
              ></SettingItem>
            );
          })}
        </div>
      </div>
    </div>
  );
};
export default RenderSetting;
